<template>
	<view class="container">
		<Header>会议活动</Header>
		<view class="content">
			<view class="title">
				{{data.title}}
			</view>
			<view class="date">
				<span>发布时间：{{data.createtime_text}}</span>
				<span>发布来源：{{data.launch}}</span>
			</view>
			<view class="flex item">
				<label>签到开始时间：</label>
				<view class="value">
					{{data.sign_time}}
				</view>
			</view>
			<view class="flex item">
				<label>请假截止时间：</label>
				<view class="value">
					{{data.leave_time}}
				</view>
			</view>
			<view class="flex item">
				<label>会议开始时间：</label>
				<view class="value">
					{{data.start_time}}
				</view>
			</view>
			<view class="flex item">
				<label>会议结束时间：</label>
				<view class="value">
					{{data.end_time}}
				</view>
			</view>
			<view class="flex item">
				<label>会议地点：</label>
				<view class="value">
					{{data.address}}
				</view>
			</view>
			<view class="flex item">
				<label>组织部分名称：</label>
				<view class="value">
					{{data.launch}}
				</view>
			</view>
			<!-- <view style="margin: 5px 0px;line-height: 24px;" v-html="data.content"></view> -->
			<mp-html :content="data.content || data.arrange" />
			<view class="files" v-if="data.meet_files">
				<view>附件：</view>
				<!-- #ifdef H5 -->
				<!-- <a v-for="item in data.meet_files" :key="item.name" :href="item.url" class="download-h5" :download="item.name">
						{{item.name}}
					</a> -->
				<!-- #endif -->
				<view v-for="item in data.meet_files" :key="item.name" @click="download(item)" style="color: #2668be;">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<!-- <span class="btn attend" v-if="type == 0" @click="attendMetting">参加会议</span> -->
			<view class="btn sign_in" :class="{'disabled': data.signStatus != 1}" @click="scanCode">扫码签到</view>
			<view class="btn leave" :class="{'disabled': data.signStatus != 1}" @click="askLeave">我要请假</view>
			<view class="btn report" @click="toPage()">活动报告</view>
		</view>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	import signIn from '../../common/signIn.js'
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: '',
				data: {},
				type: '',
				address: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
		},
		mounted() {
			this.getDetailData()
		},
		methods: {
			// 文件在线预览
			download(file) {
				uni.showLoading({
					title: '下载中'
				});
				//下载文件
				uni.downloadFile({ //只能是GET请求
					url: file.url,
					success: (res) => {
						uni.hideLoading()
						//下载成功
						if (res.statusCode === 200) {
							//保存文件
							let tempFile = res.tempFilePath;
							//保存成功之后 打开文件
							uni.getFileSystemManager().saveFile({
								tempFilePath: tempFile,
								success: (res) => {
									console.log(res)
									// uni.showToast({
									// 	title: '文件保存在' + res.savedFilePath,
									// 	icon: 'none',
									// })
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu: true, //是否可以分享
										success: (res) => {
											console.log(res);
										},
										fail: (e) => {
											uni.showToast({
												title: '打开失败',
												icon: "error"
											})
										}
									})
								}
							})
						}
					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							title: '文件下载失败',
							icon: "error",
						})
					}
				});
			},
			toPage() {
				uni.navigateTo({
					url: `/pages/resumption/meetingReport?id=${this.id}`
				})
			},
			attendMetting() {
				let time = new Date().getTime()
				let startTime = new Date(this.data.start_time).getTime()
				let endTime = new Date(this.data.end_time).getTime()
				if (time > endTime) {
					uni.showModal({
						content: '会议已结束',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				if (time > startTime) {
					uni.showModal({
						content: '会议已开始',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				uni.showModal({
					content: '确认要参加会议吗？',
					success: (res) => {
						if (res.confirm) {
							this.signIn(this.id, 'attend')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getUrlParams(href, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(href)) {
					return unescape(RegExp.$2.replace(/\+/g, " "))
				};
				return "";
			},
			scanCode() {
				if (this.data.signStatus == 2) {
					uni.showModal({
						content: '您已签到!',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				} else if (this.data.signStatus == 3) {
					uni.showModal({
						content: '您已请假!',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				uni.scanCode({
					success: (res) => {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						// uni.navigateTo({
						// 	url: res.result
						// })
						let id = this.getUrlParams(res.path, 'meet_id')
						let type = this.getUrlParams(res.path, 'codeType')
						signIn(id, type, this.data.address, () => {
							this.getDetailData()
						})
					}
				});
			},
			askLeave() {
				if (this.data.signStatus == 2) {
					uni.showModal({
						content: '您已签到!',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				} else if (this.data.signStatus == 3) {
					uni.showModal({
						content: '您已请假!',
						showCancel: false,
						success: (res) => {

						}
					});
					return false
				}
				uni.showModal({
					content: '确认要请假吗？',
					success: (res) => {
						if (res.confirm) {
							request({
								url: '/Specialhd/askLeave',
								data: {
									meet_id: this.id,
									codeType: 'specialhd'
								},
								method: 'POST'
							}).then(res => {
								uni.showModal({
									content: res.msg,
									showCancel: false,
									success: function(res) {

									}
								});
								if (res.code == 1) {
									this.data.signStatus = 3
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getDetailData() {
				request({
					url: '/Specialhd/detail',
					data: {
						meet_id: this.id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data
						if (this.data.signStatus != 1) {
							this.type = 1
						}
						let files = [],
							images = []
						if (res.data.meet_files) {
							if (Array.isArray(res.data.meet_files)) {
								res.data.meet_files.forEach(fileUrl => {
									let pos = fileUrl.lastIndexOf('/')
									let str = fileUrl.substr(pos + 1)
									files.push({
										url: fileUrl,
										name: str,
									})
								})
							} else {
								let pos = res.data.meet_files.lastIndexOf('/')
								let str = res.data.meet_files.substr(pos + 1)
								files.push({
									url: res.data.meet_files,
									name: str,
								})
							}
							this.data.meet_files = files
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20px;
		font-size: 14px;
		line-height: 26px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		line-height: 26px;
		margin-bottom: 5px;
	}

	.date {
		font-size: 12px;
		text-align: center;
		margin-bottom: 15px;

		span {
			margin: 0px 10px;
		}
	}

	.item {
		font-size: 14px;
		color: #404040;
	}

	.flex {
		display: flex;
	}

	.item label {
		width: 100px;
	}

	.bottom {
		position: sticky;
		bottom: 0;
		padding: 20px 0px;
		background-color: #fff;
		width: 100%;
		text-align: center;

		.btn {
			color: #fff;
			// padding: 10px 20px;
			border-radius: 20px;
			margin: 0px 10px;
			font-size: 14px;
			text-align: center;
			max-width: 120px;
			width: calc(33.33% - 20px);
			height: 40px;
			line-height: 40px;
			display: inline-block;
		}

		.attend {
			background-color: #be3f26;
		}

		.sign_in {
			background-color: #09a884;

			&.disabled {
				background-color: rgba(9, 168, 132, 0.5);
			}
		}

		.leave {
			background-color: #fb7a30;

			&.disabled {
				background-color: rgba(251, 122, 48, 0.5);
			}
		}


		.report {
			background-color: #2668be;
		}

	}
</style>